<script type="text/javascript">
var validasi_edit;
var validasi_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var validasi_source;
    var validasi_adapter;
    var validasi_buttonSave;
    var validasi_searchField;
    var validasi_grid=$('#validasi_grid');
    var detvalidasi_grid=$('#detvalidasi_grid');
    
/* Grid And Toolbar Declaration */
    validasi_source={
        url : 'index.php/c_validasi/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'prestasi_id' },
            { name : 'lomba_judul' },
            { name : 'lomba_cp' },
            { name : 'juara_nama' },
            { name : 'prestasi_valid', type : 'booelan' }
        ],
        beforeprocessing : function(data){
            validasi_source.totalrecords = data[0].total;
        },
		updaterow: function (rowid, rowdata, commit) {
			commit(true);
		}
    }
    validasi_adapter = new $.jqx.dataAdapter(validasi_source);
    
	validasi_buttonSave = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Simpan Data</button>");
    validasi_buttonSave.jqxButton({ width : 120 });
    validasi_buttonSave.bind('click', validasi_btnSave_click);
    validasi_searchField = $('<input type="text" class="inputfield" name="validasi_search" placeholder="Pencarian">');
    validasi_searchField.jqxInput({ theme : global_theme });
	
    validasi_grid.jqxGrid({
        source : validasi_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append(validasi_buttonSave);
            container.append(' | ');
            container.append(validasi_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return validasi_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'prestasi_id', editable: false, hidden : true, width : '40%'},
            { text : 'Nama Lomba', dataField : 'lomba_judul', editable: false, width : '40%'},
            { text : 'Penyelenggara', dataField : 'lomba_cp', editable: false, width : '25%'},
            { text : 'Juara', dataField : 'juara_nama', editable: false, width : '25%'},
			{
				text: 'Valid?', align: 'center', dataField: 'prestasi_valid', width: '10%', columntype: 'checkbox',
					renderer: function (text, align, height) {
					var checkBox = "<div id='checkbox' style='z-index: 999; margin: 5px; margin-left: 10px; margin-top: 8px; margin-bottom: 3px;'>";
					checkBox += "</div>";
					return checkBox;
				},
				rendered: function (element, align, height) {
					element.jqxCheckBox();
					element.on('change', function (event) {
						validasi_grid.jqxGrid('beginupdate');
						var args = event.args;
						var rowscount = validasi_grid.jqxGrid('getdatainformation').rowscount;
						if (args.checked) {
							for (var i = 0; i < rowscount; i++)
							{
								validasi_grid.jqxGrid('setcellvalue', i, 'det_prestasi_valid', true);
							}
						} else {
							for (var i = 0; i < rowscount; i++)
							{
								validasi_grid.jqxGrid('setcellvalue', i, 'det_prestasi_valid', false);
							}
							validasi_grid.jqxDataTable('clearSelection');
						}
						validasi_grid.jqxGrid('endupdate');
					});
					return true;
				}
			}
        ]
    });
/* Detail grid */
	detvalidasi_source={
        url : 'index.php/c_validasi/get_list_detail',
        datatype : 'json',
        root : 'results',
		data : {prestasi_id : ''},
        datafields : [
            { name : 'det_prestasi_id' },
            { name : 'siswa_nis' },
            { name : 'siswa_nama' },
            { name : 'siswa_kelas' }
        ],
        beforeprocessing : function(data){
            detvalidasi_source.totalrecords = data[0].total;
        }
	};
	detvalidasi_adapter = new $.jqx.dataAdapter(detvalidasi_source);
	
    detvalidasi_grid.jqxGrid({
        source : detvalidasi_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append('Data Siswa');
            toolbar.append(container);
        },
        rendergridrows : function(){
            return detvalidasi_adapter.records;
        },
        columns : [
            { text : 'NIS', dataField : 'siswa_nis', editable: false, width : '25%'},
            { text : 'Nama Siswa', dataField : 'siswa_nama', editable: false, width : '50%'},
            { text : 'Kelas', dataField : 'siswa_kelas', editable: false, width : '25%'}
        ]
    });
/* Function Declaration */
	validasi_grid.on('rowselect', function (e) {
		var args = e.args;
		var data = args.row;
		detvalidasi_source['data']['prestasi_id'] = data.prestasi_id;
		detvalidasi_grid.jqxGrid('gotopage',0);
		detvalidasi_grid.jqxGrid('updatebounddata');
	});
	function validasi_btnSave_click(e){
		e.preventDefault();
        var params = new Object();
		params.detail=validasi_source.records;
        params=JSON.stringify(params);
		$.ajax({
			url : 'c_validasi/save',
			type : 'post',
			data : {params : params},
			success : function(response){
				if(response == 1){
					validasi_grid.jqxGrid('updatebounddata');
					detvalidasi_grid.jqxGrid('clear');
				}
			}
		});
	}
	validasi_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			validasi_source['data']['search_text'] = $(this).val();
			validasi_grid.jqxGrid('gotopage',0);
			validasi_grid.jqxGrid('updatebounddata');
		}
	});
});
</script>
<div class="row">
	<div class="col-md-6">
		<div id="validasi_grid"></div>
	</div>
	<div class="col-md-6">
		<div id="detvalidasi_grid"></div>
	</div>
</div>